<!-- -->
<template>
  <div id='grade'>
    <div class="ebtop">
      <div class="left">现金积分交易中心</div>
      <div class="right">
        <router-link :to="{name:'gradelist',query: {status: '0'}}" tag="a"><button>我要挂卖</button></router-link>
      </div>
    </div>
    <div class="gradesell">
      <div class="sellnav">
        <div class="sellnavbox1 sellnavbox2">
          <div class="sell active">挂卖</div>
        </div>
      </div>
      <table border="1" width=100% cellspacing=0 rules=none frame=void>
          <tr class="nav navth">
            <th width="25%">用户名</th>
            <th width="25%">数量</th>
            <th width="25%">时间</th>
            <th width="25%">操作</th>
          </tr>
      </table>
      <div class="isfixed">
        <table width=100%>
          <tr v-for="(item,index) in message" :key="index" class="nav meslist">
            <td width="25%">{{item.user_name}}</td>
            <td width="25%">{{item.other}}</td>
            <td width="25%">{{item.add_time}}</td>
            <td width="25%"><button class="btn" @click="gradebuyalert(item.id)">买入</button></td>
          </tr>
        </table>
        <div  width="100%" class="mesnull">暂无更多数据...</div>
      </div>
    </div>

    <div class="gradesell mysell">
      <div class="sellnav">
        <div class="sellnavbox1">
          <div class="sell" :class="{ active: grademode=='0' }" @click="mysell">我的挂卖</div>
          <div class="buy"  v-bind:class="{ active: grademode=='1' }" @click="mybuy">交易明细</div>
        </div>
      </div>
      <!-- 我的挂卖 -->
      <table border="1" width = 100% cellspacing = 0 rules = none frame=void v-if="grademode=='0'">
          <tr class="nav navth">
            <th width="25%">时间</th>
            <th width="25%">数量</th>
            <th width="25%">剩余数量</th>
            <th width="25%">操作</th>
          </tr>
      </table>
      <div class="isfixed1" v-if="grademode=='0'">
        <table width = 100%>
            <tr v-for="(item,index) in mymessage" :key="index" class="nav meslist">
              <td width="25%">{{item.add_time}}</td>
              <td width="25%">{{item.num}}</td>
              <td width="25%">{{item.other}}</td>
              <td width="25%"><button class="btn btnclose" :disabled="true" :class="{ 'btnother2': item.status === '2'}" @click="gradesellalert(index,item.status,item.id)">{{sellbuy[item.status-1]}}</button></td>
            </tr>
        </table>
        <div  width="100%" class="mesnull">暂无更多数据...</div>
      </div>
        <!-- 交易明细 -->
        <table border="1" width = 100% cellspacing = 0 rules = none frame=void v-if="grademode=='1'">
          <tr class="nav navth">
            <th width="15%">交易性质</th>
            <th width="15%">交易金额</th>
            <th width="15%">交易对象</th>
            <th width="15%">联系方式</th>
            <th width="20%">交易时间</th>
            <th width="20%">操作</th>
          </tr>
        </table>
        <div class="isfixed1" v-if="grademode=='1'">
          <table width = 100%>
            <tr v-for="(item,index) in grademessage" :key="index" class="nav meslist">
              <td width="15%">{{item.log}}</td>
              <td width="15%" style="color:rgba(224,3,0,1)">&yen;{{item.num*6.3}}</td>
              <td width="15%">{{item.trad_name}}</td>
              <td width="15%">{{item.user_phone}}</td>
              <td width="20%">{{item.add_time}}</td>
              <!-- <td width="20%"><button class="btn" :disabled="(btnmes === '0')" :class="{ 'btnclose': btnmes === '0','btnother1': btnmes !== '0','btnother2': btnmes === '3'}" @click="gradesellalert(index,item.status)">{{sellbuy1[btnmes]}}</button></td> -->
              <td width="20%" v-if="(item.log==='卖出')&&(item.status==='1')"><button class="btnclose">等待对方上传打款截图</button></td>
              <td width="20%" v-if="(item.log==='买入')&&(item.status==='1')"><button class="btnclose btnother1" @click="gradesellalert1(index,item.id)">上传打款截图</button></td>
              <td width="20%" v-if="(item.log==='卖出')&&(item.status==='2')"><button class="btnclose btnother1" @click="gradesellalert2(index,item.id)">查看打款截图确认收款</button></td>
              <td width="20%" v-if="(item.log==='买入')&&(item.status==='2')"><button class="btnclose btnother1" @click="gradesellalert3(index,item.id)">打款成功交易完成</button></td>
              <td width="20%" v-if="(item.log==='卖出')&&(item.status==='3')"><button class="btnclose btnother1" @click="gradesellalert3(index,item.id)">收款成功交易完成</button></td>
              <td width="20%" v-if="(item.log==='买入')&&(item.status==='3')"><button class="btnclose btnother1" @click="gradesellalert3(index,item.id)">查看打款截图</button></td>
            
            </tr>
          </table>
          <div class="mesnull">暂无更多数据...</div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "grade",
  data() {
    return {
      grademode: "0",
      sellbuy: ["挂卖中", "已卖完"],
      btnmes: "",
      message: [],
      mymessage: [],
      grademessage: [],
      // 弹窗
      name: "我是用户名",
      price: "234", //单价
      number: "50", //数量
      sumprice: "88888", //总价
      charge: "666", //手续费
      mode: "现金积分钱包", //支付方式
      password: "",
      time: "2018-08-01 16.33.40"
    };
  },
  mounted() {
    this.loadmes();
    this.mybuy();
    if (this.$route.query.activetype === "1") {
      this.grademode = "1";
    } else {
      this.grademode = "0";
    }
  },
  methods: {
    loadmes() {
      this.axios
        .post("Index/jifen_trad")
        .then(({ data }) => {
          console.log(data);
          this.message = data.order;
          this.mymessage = data.my_order;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 我的挂卖
    mysell() {
      this.grademode = "0";
    },
    // 交易明细
    mybuy() {
      this.grademode = "1";
      this.axios
        .post("Index/my_jifen_pay_list")
        .then(({ data }) => {
          console.log(data);
          this.grademessage = data.order;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 买入
    gradebuyalert(id) {
      this.$router.push({ path: "/gradelist", query: { status: "3", id: id } });
    },
    // 挂卖和明细
    gradesellalert(index, status, id) {
      console.log(status);
      if (status === "1") {
        this.open2();
      }
    },
    gradesellalert1(index, id) {
      this.$router.push({ path: "/gradelist", query: { status: "2", id: id } });
    },
    gradesellalert2(index, id) {
      this.$router.push({ path: "/gradelist", query: { status: "4", id: id } });
    },
    gradesellalert3(index, id) {
      this.$router.push({ path: "/gradelist", query: { status: "1", id: id } });
    },
    open2() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.mymessage.splice(index, 1);
      });
    }
  }
};
</script>

<style lang='scss' scoped>
#grade {
  min-width: 1000px;
  .ebtop {
    width: 100%;
    height: 55px;
    padding: 0 83px 0 25px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(153, 153, 153, 1);
    .left {
      font-size: 13px;
      font-family: MicrosoftYaHei-Bold;
      color: rgba(0, 0, 0, 1);
      font-weight: 700;
      line-height: 65px;
    }
    .right {
      line-height: 55px;
      button:nth-of-type(1) {
        cursor: pointer;
        width: 74px;
        height: 24px;
        margin-right: 25px;
        border-radius: 2px;
        background-color: #fff;
        border: 1px solid rgba(224, 3, 0, 1);
        color: rgba(224, 3, 0, 1);
      }
    }
  }
  .gradesell {
    margin: 10px 20px;
    border: 1px solid rgba(153, 153, 153, 1);
    overflow: hidden;
    .isfixed {
      height: 30vh;
      // background: red;
      overflow: auto;
    }
    .isfixed1 {
      height: 29vh;
      // background: red;
      overflow: auto;
    }
    .sellnav {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      line-height: 50px;
      background-color: #232323;
      .sellnavbox2 {
        border-top: 1px solid rgba(153, 153, 153, 1);
      }
      .sellnavbox1 {
        cursor: pointer;
        font-size: 17px;
        font-family: MicrosoftYaHei-Bold;
        color: rgba(0, 0, 0, 1);
        text-align: center;
        display: flex;
        justify-content: flex-start;
        .sell {
          width: 163px;
          color: rgba(255, 255, 255, 1);
          border-right: 1px solid rgba(151, 151, 151, 1);
        }
        .buy {
          width: 163px;
          color: rgba(255, 255, 255, 1);
          border-right: 1px solid rgba(151, 151, 151, 1);
        }
        .active {
          background-color: rgba(255, 255, 255, 1);
          color: rgba(0, 0, 0, 1);
        }
      }
      .sellnavbox2 {
        margin-right: 17px;
      }
    }
    .mesnull {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: rgba(102, 102, 102, 1);
      line-height: 50px;
      text-align: center;
      // border-top:1px solid rgba(221,221,221,1);
    }
    .nav {
      font-size: 13px;
      font-family: MicrosoftYaHei;
      color: rgba(102, 102, 102, 1);
      // background-color: #f2f2f2;
      line-height: 45px;
      text-align: center;
      border-bottom: 1px solid rgba(221, 221, 221, 1);
      .btn {
        cursor: pointer;
        height: 28px;
        padding: 0 15px;
        background-color: rgba(224, 3, 0, 1);
        border-radius: 3px;
        font-size: 11px;
        font-family: MicrosoftYaHei;
        color: rgba(255, 255, 255, 1);
      }
      .btnactive {
        background: rgba(224, 3, 0, 1);
      }
      .btnclose {
        background: #e1e1e1;
        color: rgba(102, 102, 102, 1);
      }
      .btnother1 {
        cursor: default;
        background: none;
        padding: 0 5px;
        color: #333;
        &:hover {
          cursor: pointer;
          color: rgba(224, 3, 0, 1);
          padding: 0 5px;
        }
      }
      .btnother2 {
        cursor: default;
        background: none;
        color: rgba(102, 102, 102, 1);
      }
    }
    .meslist:hover {
      background-color: #f0f0f0;
    }
    .navth {
      line-height: 55px;
    }
  }
  .mysell {
    // height: 39vh;
    // min-height: 290px;
    margin-top: 20px;
  }
  .alertmes {
    margin-left: 30px;
    margin-top: -30px;
    min-width: 550px;
    li {
      line-height: 40px;
      font-size: 12px;
      font-family: MicrosoftYaHei;
      color: rgba(102, 102, 102, 1);
      span {
        font-weight: 700;
      }
    }
    li:nth-of-type(4) {
      span {
        color: rgba(224, 3, 0, 1);
      }
    }
  }
}
</style>